<template>
  <div style="overflow-x:hidden;background:#f4f4f4;">
    <section class="nav-box">
      <section class="nav">
       <div class="nav-logo">
          <router-link to="/" class="za-navigation-icon-wrapper">
            <div class="za-logo">
               <img src="./assets/logo.png" alt="" style="position:absolute;margin-left:-7vw;margin-top:-5px;">
            </div>
          </router-link>
       </div>
        <div class="nav-list">
         <ul>
          <li>
            <router-link to="/"><Icon type="home" size="20"></Icon>&nbsp;<span>首页</span></router-link>
          </li>
          <li>
            <router-link to="/Find"><Icon type="ios-search-strong" size="20"></Icon>&nbsp;<span>发现</span></router-link>
          </li>
          <li>
            <router-link to="/Communication"><Icon type="person-stalker" size="20"></Icon>&nbsp;<span>交流</span></router-link>
          </li>
          <li>
            <router-link to="/Read"><Icon type="ios-book-outline" size="20"></Icon>&nbsp;<span>阅读</span></router-link>
          </li>
          <li>
            <router-link to="/Find"><Icon type="ios-videocam-outline" size="20" style="margin-top:10px;"></Icon>&nbsp;<span>新闻</span></router-link>
          </li>
        </ul>
      </div>
      <div class="layout-ceiling-main">
          <div class="user">
           <Dropdown @on-click="courseList">
            <a href="javascript:void(0)">
             {{userName}}
            </a>
            <DropdownMenu slot="list" v-show="isshow">
              <DropdownItem>课程列表</DropdownItem>
              </DropdownMenu>
           </Dropdown>
         </div>
      </div>   
      <div class="layout-ceiling-main-logout">
          <div class="logout" @click="logout">退出</div>
      </div>
       </section>
     </section>
     <Foot></Foot> 
    <router-view></router-view>
  </div>
</template>
<script>
import UserAPI from "@/api/UserAPI";
import LogoutAPI from "@/api/LogoutAPI";
import axios from "axios";
import Foot from "@/components/Foot"
export default {
    data () {
        return {
            userName: '',
            isshow:false
        }
    },
    components:{
     Foot
    },
    mounted(){
      this.getUserName();
     
    },
    methods: {
      getUserName() {
        axios.get(UserAPI.current_user).then((resp) => {
          // alert(resp.data.userInfo.isAdmin)
          if(resp.data.userInfo.isAdmin){
                this.isshow=true;
           }
            this.userName = resp.data.userInfo.name;
        });
      },
      logout() {
        axios.get(LogoutAPI.logout).then((resp) => {
          this.userName = null;
          this.$router.push("/logout");
        });
      },
      courseList(){
        this.$router.push('/knowledge/course/my/list')
      }
   }
}
</script>
<style scoped>
.nav-box {
  width: 100vw;
  height: 60px;
  position: fixed;
  z-index: 1000;
  background: rgba(2, 104, 238, 0.6);
}
.nav {
  width: 60vw;
  height: 60px;
  margin: 0 auto;
  text-align: center;
  margin-left: 15vw;
  margin-right: 15vw;
}
.za-navigation-icon {
  font-size: 36px;
  height: 30px;
  width: 50px;
  display: block;
  position: absolute;
  margin-top: -5px;
}
.za-navigation-icon-wrapper {
  cursor: pointer;
  color: #fff;
  margin-left: 30px;
  padding-top: 13px;
  line-height: 28px;
  display: block;
}
@font-face {
  font-family: "icomoon";
  src: url("./assets/fonts/icomoon.eot"); /* IE9*/
  src: url("./assets/fonts/icomoon.eot?#iefix") format("embedded-opentype"),
    url("./assets/fonts/icomoon.woff") format("woff"),
    url("./assets/fonts/icomoon.ttf") format("truetype"),
    url("./assets/fonts/icomoon.svg#icomoon") format("svg"); /* iOS 4.1- */
}
.za-navigation-icon:before {
  font-family: "icomoon" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
  content: "\e904";
  color: #fff;
  font-size: 20px;
}
.nav .nav-logo {
  width: 13vw;
  height: 60px;
  margin-left: -1vw;
  padding-left: -6vw;
}
.nav .nav-list {
  width: 60vw;
  height: 60px;
  margin: 0 auto;
  text-align: center;
  margin-top: -60px;
  margin-left: 8vw;
}
.nav .nav-list ul {
  width: 45vw;
  height: 60px;
  list-style: none;
}
.nav-list ul li {
  display: flex;
  width: 7vw;
  height: 60px;
  float: left;
  margin-left: 1vw;
}
.nav-list ul li a {
  color: #fff;
  width: 7vw;
  text-decoration: none;
  line-height: 60px;
  font-size: 16px;
}
.nav-list ul li a:hover {
  border-bottom: 3px solid rgb(252, 125, 6);
}
.layout-ceiling-main {
  font-size: 14px;
  line-height:60px;
  float: right;
  color: #fff;
  margin-right:-100px;
  margin-top: -60px;
  margin-left: -2vw;
}
.layout-ceiling-main-logout{
  font-size: 14px;
  line-height:60px;
  float: right;
  margin-right: -150px;
  color: #fff;
  margin-top: -60px;
  cursor: pointer;
}
.layout-ceiling-main a {
  padding: 0 20px;
  position: relative;
  color: #fff;
  border-right: 1px solid #fff;
  box-shadow: 1px 0 0 #999;
}
</style>
